<script lang="ts">
    import { onMount } from 'svelte';
    import { navigate } from 'svelte-routing';
    import { writable } from 'svelte/store';
    import { formatDate } from '../../utils/time';
    import { get, post } from '../../utils/api';
    import { addToast } from '../../stores/toastStore';
    import Header from '../../components/garage/Header.svelte';

    const formData = writable({
        client_name: '李四', // 甲方名
        plate_number: '鄂AFG2129', // 车牌号
        explanation: '寄钥匙一把', // 任务说明
        tracking_number: 'SF00001', // 物流单号
        remark: '这里是备注', // 备注
        item_sendback: 1, // 物品回寄
        address: '潜山市槎水镇龙关村青年组 27 号', // 回寄地址
    });


    let itemSendback;
    formData.subscribe(value => {
        itemSendback = String(value.item_sendback);
    });

    function updateItemSendback(value) { // 物品回寄
        formData.update(data => {
            data.item_sendback = parseInt(value, 10);;

            return data;
        });
    }
    
    const handleSubmit = async () => {
        const data = $formData;

        try {
            const result = await post('/operation/key-deliveries', data);

            navigate('/key-delivery-result?id='+result.data.id)

            addToast('申请成功', 'info', 3000);
        } catch (error) {
            addToast('提交失败'+error, 'error', 3000);
        }
    };

    onMount(() => {
    });
</script>

<main>
    <Header title="寄钥匙" />
    <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="form-group mb-4">
            <label class="text-gray-600">甲方名</label>
            <input type="text" class="input-field" placeholder="请输入甲方名" bind:value={$formData.client_name}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">车牌号</label>
            <input type="text" class="input-field" placeholder="请输入车牌号" bind:value={$formData.plate_number}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">任务说明</label>
            <input type="text" class="input-field" placeholder="请输入任务说明" bind:value={$formData.explanation}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">物流单号</label>
            <input type="text" class="input-field" placeholder="请输入物流单号" bind:value={$formData.tracking_number} />
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">备注</label>
            <input type="text" class="input-field" placeholder="请输入备注" bind:value={$formData.remark} />
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">物品回寄</label>
            <div class="flex items-center mt-1">
                <label class="mr-2 items-center">
                    <input type="radio" name="item_sendback" value="1" bind:group={itemSendback} on:change={() => updateItemSendback(1)} class="mr-1">是
                </label>
                <label class="items-center">
                    <input type="radio" name="item_sendback" value="0" bind:group={itemSendback} on:change={() => updateItemSendback(0)} class="mr-1">否
                </label>
            </div>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">回寄地址</label>
            <input type="text" class="input-field" placeholder="请输入回寄地址" bind:value={$formData.address}>
        </div>

        <div class="flex justify-end mt-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded shadow-sm" on:click={handleSubmit}>提交</button>
        </div>
    </div>
</main>

<style lang="scss">
  .form-group {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    &:last-child {
      border-bottom: none;
    }
    label {
      flex: 0 0 100px;
      margin-right: 1rem;
    }
    input, textarea, select {
      flex: 1;
      border: none;
      padding: 0.5rem;
      background-color: #f9fafb;
      &:focus {
        outline: none;
      }
    }
  }
  .form-group .flex.items-center label {
    margin-right: 2rem;
  }
  .input-area {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
  }
</style>
